<template>
  <div class="question-list">
    <template v-if="props.sort === 1">
      <div v-for="(item, index) in handleList" :key="index" class="detail">
        <p class="type">
          {{ item?.desc }}
        </p>
        <ul class="list">
          <li
            class="item"
            v-for="(item1, index1) in item?.detail"
            :key="index1"
            :class="{ active: currentIndex === item1.questionIndex }"
            @click="changeQuestion(item1.questionIndex, item1)"
          >
            <p class="item__progress">
              <span class="num"
                >{{ item1.questionIndex
                }}<label
                  v-if="
                    item1.original_video &&
                    (item1.original_video?.videoUrl ||
                      item1.original_video?.url)
                  "
                  class="has-video"
                ></label
              ></span>
              <a-progress
                :format="formatPercent"
                :percent="Number(formatNum(item1.score_rate))"
                :strokeColor="getColor(Number(formatNum(item1.score_rate)))"
                trailColor="rgba(243, 245, 251, 1)"
              />
            </p>
          </li>
        </ul>
      </div>
    </template>
    <ul class="list" v-else>
      <li
        class="item"
        v-for="(item, index) in props.questionList"
        :key="index"
        :class="{ active: currentIndex === item.questionIndex }"
        @click="changeQuestion(item.questionIndex, item, index)"
      >
        <p class="item__progress">
          <span class="num"
            >{{ item.questionIndex
            }}<label
              v-if="
                item.original_video &&
                (item.original_video?.videoUrl || item.original_video?.url)
              "
              class="has-video"
            ></label
          ></span>
          <a-progress
            :format="formatPercent"
            :percent="Number(formatNum(item.score_rate))"
            :strokeColor="getColor(Number(formatNum(item.score_rate)))"
            trailColor="rgba(243, 245, 251, 1)"
          />
        </p>
      </li>
      <p class="tip" v-if="props.sort === 3 && props.questionList.length === 0">
        暂无标记题目
      </p>
    </ul>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { formatNum } from '@/utils/common'
import { useComment } from '@/stores/comment'
import _ from 'lodash'

const { setQuestion } = useComment()
const currentIndex = ref('')

// 按题型分类，整合数据
const handleList = computed(() => {
  const typeList = _.uniqBy(props.questionList || [], 'question_type')
  const res = []
  for (let index = 0; index < typeList.length; index++) {
    const type = typeList[index].question_type
    const temp = (props.questionList || [])
      .map((item, index) => {
        return {
          type: item.question_detail.type,
          order: index,
          desc: item.question_type,
          ...item
        }
      })
      .filter(item => item.desc === type)
    res.push({
      type: typeList[index].question_detail.type,
      desc: type,
      detail: temp
    })
  }
  return res
})

const props = defineProps({
  sort: {
    type: Number,
    default: 1
  },
  questionList: {
    type: Array,
    default: () => []
  },
  allList: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['current-question'])

const changeQuestion = (question_index, item, index) => {
  if (props.sort === 1) {
    const flag = props.questionList.findIndex(
      item1 => item1.questionIndex === item.questionIndex
    )
    emits('current-question', flag)
  } else {
    emits('current-question', index)
  }
  currentIndex.value = question_index
  setQuestion(item)
}

const changePage = num => {
  // 排序为标记讲评 && 标记讲评的列表为空
  if (props.sort === 3 && props.questionList.length === 0) {
    // 取排序列表的第一题
    const content = props.allList[num - 1]
    currentIndex.value = content?.questionIndex || 1
    setQuestion(content)
  } else {
    const content = props.questionList[num - 1]
    currentIndex.value = content?.questionIndex || 1
    setQuestion(content)
  }
}

const getColor = percent => {
  let color = ''
  if (percent >= 90) {
    color = 'rgba(76, 223, 192, 1)'
  } else if (percent >= 80) {
    color = 'rgba(138, 199, 255, 1)'
  } else if (percent >= 60) {
    color = 'rgba(255, 190, 33, 1)'
  } else {
    color = 'rgba(255, 123, 115, 1)'
  }
  return color
}

const formatPercent = num => {
  return num + '%'
}

defineExpose({
  changePage,
  currentIndex
})
</script>
<style lang="less" scoped>
.question-list {
  overflow-y: auto;
  padding-top: 12px;

  &::-webkit-scrollbar {
    display: none;
  }
  .detail {
    margin-top: 12px;
  }
  .type {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;

    .tip {
      text-align: center;
      color: #fff;
    }
    .item {
      list-style-type: none;
      padding: 0 9px;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
      }

      &__progress {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        .num {
          display: inline-block;
          position: relative;
          width: 32px;
          color: rgba(255, 255, 255, 0.7);
          font-size: @big-size;

          .has-video {
            display: inline-block;
            position: absolute;
            width: 14px;
            height: 14px;
            background: url('@/assets/images/comment/video-small.svg') no-repeat
              center/cover;
            right: 5px;
            top: -7px;
          }
        }
      }
    }

    .active {
      background: rgba(255, 255, 255, 0.22);
      border-radius: 8px;
    }

    :deep(.ant-progress) {
      flex: 1;
      display: flex;
      align-items: center;

      .ant-progress-inner {
        height: 16px;

        .ant-progress-bg {
          height: 100% !important;
        }
      }

      .ant-progress-text {
        width: 58px;
        text-align: right;
        color: #fff;
        font-weight: 600;
        font-size: @base-size;
      }
    }
  }
}
</style>
